<template>
  <el-container>
    <el-header>
      <!-- 导航栏  -->
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#3f9f00"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item>
          <router-link to="/">
            <svg
              t="1651941803473"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2943"
              width="50"
              height="50"
            >
              <path
                d="M923.136 576.512V312.32c0-20.992-13.312-44.032-32.768-55.808l-346.624-199.168c-18.944-11.776-46.592-11.776-65.536 0l-347.136 199.68c-18.944 11.776-32.256 34.816-32.256 55.808v264.192h-20.48V829.44H235.52l242.688 140.288 0.512 0.512c9.216 4.608 20.48 7.168 31.744 7.168 11.776 0 23.04-2.56 31.744-7.168l241.664-140.288h159.232v-252.416h-19.968z m-408.064-465.408h3.584L841.728 296.96 517.12 476.672l-324.608-179.2 322.56-186.368zM167.936 356.352l317.44 174.592v45.568h-317.44v-220.16z m215.552 423.936c-14.848 16.384-34.816 22.016-50.176 22.016-21.504 0-38.4-5.12-50.688-14.336-17.92-13.824-22.528-35.84-24.064-55.808l-1.024-11.776H296.96l1.536 9.216c2.048 14.336 5.12 21.504 10.24 25.088l0.512 0.512c7.168 5.632 15.872 8.192 24.576 7.68 11.776 0 19.968-2.048 25.088-6.144l1.024-0.512c4.096-2.56 6.656-7.68 6.144-13.312-0.512-7.168-4.608-13.824-10.752-16.896l-1.024-0.512c-1.536-1.024-8.192-3.072-13.824-5.12-5.12-1.536-11.264-3.584-17.92-6.144-14.336-4.608-25.6-9.728-32.256-12.8-2.048-1.024-3.584-1.536-4.608-2.048l-1.024-0.512c-15.872-8.192-25.088-25.6-24.064-44.032-0.512-17.408 7.68-33.28 20.992-43.008 13.824-9.728 30.208-14.848 47.104-14.336 21.504 0 36.864 5.632 49.664 17.408 12.8 11.776 20.992 29.696 21.504 48.128l0.512 10.752h-38.4l-1.536-8.704c-2.048-11.264-4.608-18.432-9.216-22.016a36.352 36.352 0 0 0-22.528-7.68H327.68c-7.68 0-15.36 1.536-22.528 4.608-3.584 2.56-6.144 7.168-5.632 11.776v1.024c0 4.608 2.56 8.192 5.632 9.728l1.536 0.512c8.704 4.096 17.408 7.168 26.624 9.216h0.512c14.848 4.096 29.184 9.728 43.008 16.896 15.872 8.704 26.112 27.136 25.6 46.592 0 17.92-7.168 30.72-18.944 44.544z m102.4 116.224l-111.616-67.584h111.616v67.584z m62.464 0v-67.584h116.736l-116.736 67.584z m54.272-111.104l3.584 6.656-26.112 29.184-7.168-13.312c-2.56-4.096-5.12-8.192-8.192-12.288-1.536-2.048-3.072-4.096-4.608-6.656-12.288 6.656-25.6 10.24-39.424 10.24h-3.584c-15.36 0.512-30.72-4.608-43.52-14.336-6.656-4.608-12.8-10.24-18.432-15.872l-0.512-0.512c-14.848-18.432-22.528-43.52-22.528-72.704 0-31.744 7.168-54.784 23.04-72.704 5.12-6.656 11.776-12.288 19.456-16.896 13.312-7.168 27.136-11.776 40.96-13.824h5.12c28.16 0 49.664 10.24 64 30.72 14.848 18.432 22.528 43.52 22.528 72.192 0.512 24.064-6.656 48.128-19.456 68.096 5.632 6.656 10.24 14.336 14.848 22.016z m37.888 3.584v-193.536h39.936v154.624l93.696 5.12v33.792h-133.632z m225.792-212.48h-317.44v-45.568l317.44-174.592v220.16z"
                p-id="2944"
                fill="#ffffff"
              ></path>
              <path
                d="M518.144 632.32h-3.072c-11.264 1.536-22.016 6.656-30.208 15.36l-1.024 1.024c-8.704 13.824-13.312 30.208-12.8 47.104v1.024c-0.512 16.384 3.584 33.28 12.8 46.592l2.048 2.56c7.168 9.216 17.408 14.848 28.16 14.336h4.096c6.144 0 12.288-1.024 18.432-3.584-5.632-8.192-11.776-16.384-18.432-24.064l-6.144-7.168 26.112-28.672 7.68 10.24c4.096 5.12 7.68 9.728 11.776 14.336 2.048 2.56 4.096 4.608 5.632 7.168 3.072-8.704 4.608-18.944 4.608-31.232 0.512-16.896-3.584-33.28-12.8-47.104-9.728-11.776-23.04-17.92-36.864-17.92z"
                p-id="2945"
                fill="#ffffff"
              ></path>
            </svg>
          </router-link>
        </el-menu-item>
        <el-menu-item class="you" @click="centerDialogVisible = true">{{
          ip
        }}</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <p class="ti1">正确答案：</p>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 6 }"
        placeholder="请输入正确的sql语句(每题之间用英文;隔开哦)"
        v-model="answer"
      >
      </el-input
      ><br />
      <p class="ti1">待测语句：</p>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 6 }"
        placeholder="请输入待测的sql语句(每题之间用英文;隔开哦)"
        v-model="sql"
      >
      </el-input>
      <el-button type="success" round class="top1" @click="go()"
        >提 交</el-button
      >
      <!-- 记录提交数据 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="正确答案">
                <span>{{ props.row.answer }}</span>
              </el-form-item>
              <el-form-item label="测试语句">
                <span>{{ props.row.sql }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="Ip" prop="url"> </el-table-column>
        <el-table-column label="端口" prop="port"> </el-table-column>
        <el-table-column label="目标数据库" prop="database"> </el-table-column>
        <el-table-column label="账号" prop="username"> </el-table-column>
        <el-table-column label="密码" prop="password"> </el-table-column>
        <el-table-column label="提交结果" prop="msg"> </el-table-column>
      </el-table>
      <!-- 设定参数输入框的定位 -->
      <el-dialog
        title="别急，马上就好..."
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="远程数据库IP:">
            <el-input
              type="text"
              v-model="ruleForm.url"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="端口:">
            <el-input
              type="text"
              v-model="ruleForm.port"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="目标数据库:">
            <el-input
              type="text"
              v-model="ruleForm.database"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号:">
            <el-input
              type="text"
              v-model="ruleForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input
              type="text"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="determine()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 连接成功 -->
      <el-dialog title="" :visible.sync="successful" class="result">
        <el-result
          icon="success"
          title="连接数据库成功"
          subTitle="让我们开始吧"
        >
        </el-result>
      </el-dialog>
      <!-- 连接失败 -->
      <el-dialog title="" :visible.sync="failure" class="result">
        <el-result icon="error" title="连接数据库失败" subTitle="请重新配置">
        </el-result>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      ip: "localhost",
      answer: "",
      sql: "",
      centerDialogVisible: false,
      successful: false,
      failure: false,
      ruleForm: {
        url: "",
        port: "",
        database: "",
        username: "",
        password: "",
      },
      bind: false,
      tableData: [],
    };
  },
  methods: {
    determine() {
      this.$axios
        .post("/sql/bind", {
          url: this.ruleForm.url,
          port: this.ruleForm.port,
          database: this.ruleForm.database,
          username: this.ruleForm.username,
          password: this.ruleForm.password,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            //   连接成功后
            this.successful = !this.successful;
            this.ip = this.ruleForm.url;
            this.centerDialogVisible = false;
            setTimeout(function () {
              this.successful = !this.successful;
            }, 3000);
          } else {
            this.failure = !this.failure;
            this.ruleForm = {
              url: "",
              port: "",
              database: "",
              username: "",
              password: "",
            };
          }
        });
    },
    go() {
      // 校验参数
      if (this.sql === "" || this.answer === "") {
        window.alert("sql语句为空哦 ~");
        return;
      }
      this.$axios
        .post("/sql/validation", {
          url: this.ruleForm.url,
          port: this.ruleForm.port,
          database: this.ruleForm.database,
          username: this.ruleForm.username,
          password: this.ruleForm.password,
          sql: this.sql,
          answer: this.answer,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 0) {
            //   错误
            window.alert(res.data.msg);
          }
          //   记录数据
          this.tableData.push({
            url: this.ruleForm.url,
            port: this.ruleForm.port,
            database: this.ruleForm.database,
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            sql: this.sql,
            answer: this.answer,
            msg: res.data.msg,
          });
        });
    },
  },
  created() {
    if (!this.bind) {
      this.centerDialogVisible = true;
    }
  },
};
</script>

<style>
.el-header {
  margin: 0 !important;
  padding: 0 !important;
}
html {
  margin: 0 !important;
  padding: 0 !important;
}
.you {
  margin-left: 85% !important;
}
.ti1 {
  font-size: 28px;
  font-weight: 1000;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #757575;
}
.result {
  width: 1000px;
  height: 550px;
}
.top1 {
  width: 150px;
  height: 55px;
  margin-top: 20px !important;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>